<template>
  <view class="grid">

    <view class="currentRoom">
      <view class="room">
        <view class="room-item">
          <text style="font-size: 1.1em; flex:2;">当前机房</text>
          <!-- <uni-data-select style="width:300rpx;" v-model="no" :localdata="deviceList" :clear="true"
            @change="Changedevice"></uni-data-select> -->
          <DeviceVue style="flex:1;" :deviceList="deviceList" @changedevice="Changedevice"></DeviceVue>
        </view>
        <text style="font-size: 0.8em;color: rgb(109,114,127);">该设备共有1{{}}条控制指令</text>
      </view>
      <view class="deng">
        <childer_ v-for="item in filteredList" :key="item.id" :form-item="item" :index="item.id" :childer="form1"
          :ws="ws" :device="no"></childer_>
      </view>
    </view>


    <view>
      <view
        style="margin-bottom: 10px;background-color: white;width: 100%; border-radius: 10px;border:2px solid;border-color:rgb(230,231,235);">
        <text style="padding:30rpx;font-size: 1.1em;">操作日志</text>
        <uni-table ref="Items" type="" emptyText="暂无更多数据">
          <uni-tr>
            <uni-th width="30" align="center">设备</uni-th>
            <uni-th width="50" align="center">操作</uni-th>
            <uni-th width="50" align="center">时间</uni-th>
          </uni-tr>
          <uni-tr v-for="(item, index) in loglist" :key="index">
            <uni-td align="center">{{ item.d_no }}</uni-td>
            <uni-td align="center">{{ item.value }}</uni-td>
            <uni-td align="center">{{ item.c_time }}</uni-td>
          </uni-tr>
        </uni-table>

        <uni-pagination style="border-radius: 0px 0px 10px 10px;" :show-icon="true" :current="current"
          :total="tabletotal" @change="PageChange" />
      </view>
    </view>
  </view>
</template>

<script setup>
//待重构
import {
  computed,
  ref
} from 'vue'
import Input_ from '@/components/funComponent/Input_.vue';
import Switch_ from '@/components/funComponent/Switch_.vue';
import Slider_ from '@/components/funComponent/Slider_.vue';
import Data_ from '@/components/funComponent/Data_.vue';
import Checkbox_ from '@/components/funComponent/Checkbox_.vue';
import Childer_ from '@/components/funComponent/Childer_.vue';
import DeviceVue from '@/components/functions/Device.vue'
import { onMounted } from "vue";
import { onBeforeUnmount } from 'vue';

let no = ref(0);
const currentTime = ref(new Date().toLocaleTimeString());
let set = ref(0);
let form1 = ref([]);
let datavalue = 0;
let loglist = ref([]);
let deviceList = ref([]);
const tabletotal=ref(0)
const current=ref(1)
const pagecurrent=ref(10)

const SendDate = (page) => {
ws.send({
    data: JSON.stringify({
      pageIndex: page,
      type: "Page",
    })
  });
}
const PageChange=(e)=> {
 pagecurrent.value = e.current;
  SendDate((pagecurrent.value - 1) * 10);
}



const Refresh = () => {
  form1.value = [];
  ws.send({
    data:
      JSON.stringify({
        page: 5,
        type: 0,
      })

  }
  );
}


const ws = uni.connectSocket({
  //url: 'ws://192.168.209.89:8080/DirectConfig',
  //url: 'ws://192.168.1.108:8080/DirectConfig',
  // url: 'ws://192.168.67.50:8080/DirectConfig',
  url: 'ws://192.168.1.111:8080/DirectConfig',
  success: () => {
    console.log('WebSocket连接');
  }
});
onMounted(() => {
  ws.onOpen(() => {
    console.log('WebSocket连接已打开！');
  });
})

ws.onMessage((e) => {
  try {
    let obj = JSON.parse(e.data);
    console.log(obj)
    switch (obj.topic) {
      case 'log':
        loglist.value = obj.data;
        break;
      case 'log_count':
          // pagecurrent.value = obj.data[0].count;
          console.log(e,'log_count');
        tabletotal.value=obj.data[0].count;
          break;
      case 't_direct_config':
        form1.value = (obj.data);
        break;
      case 'device':
        obj.data.forEach((item) => {
          deviceList.value.push({
            value: item.id,
            text: item.device_name,
          });
        });
        break;
    }
  }
  catch {

  }
})

ws.onClose(() => {
  console.log('WebSocket已关闭');
});

onBeforeUnmount(() => {
  console.log('组件销毁');
  ws.close();
});

const filteredList = computed(() => {
  return form1.value.filter(item => item.id == 0)
})

const ChilderList = computed(() => {
  return form1.value.filter(item => item.childer == "null" && item.mode != "1")
})

const Global = computed(() => {
  return form1.value.filter(item => item.ref_value == "a")
})

const Changedevice = (e) => {
  no.value = e;
  form1.value = [];
  ws.send({
    data: JSON.stringify({
      d_no: deviceList.value[no.value].value,
      type: 'device',
      value: 'Data',
    })
  })
};
</script>

<style scoped>
.grid {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
.currentRoom{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
    background-color: white;
    width: 100%;
}
.room{
  padding: 20rpx;
  border-radius: 10px;
  border: 2px solid;
  border-radius: 10px;
  border-color: rgb(230, 231, 235);
}
.room-item{
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
 
}
.deng{
    background-color: white;
    border-radius: 10px;
    border: 2px solid;
    border-color: rgb(230, 231, 235);
}
/* 移动端适配 - 针对小屏幕优化 */
@media screen and (max-width: 415px) {
  
  .currentRoom {
    grid-template-columns: repeat(1, minmax(150rpx, auto));
  }
}

/* 平板及以上设备 */
@media screen and (min-width: 416px) and (max-width:769px) {
  
}
@media screen and (min-width: 770px) and (max-width:1023px) {}

/* 大屏幕PC适配 */
@media screen and (min-width: 1024px) {}
</style>